<template>
    <div class="main record-list">
        <section>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="96px">
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="用户：" prop="userParam">
                            <el-input @keyup.enter.native="search" v-model="listQuery.userParam" placeholder="用户昵称/ID/手机" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="使用状态：" prop="couponState">
                            <el-select v-model="listQuery.couponState" clearable>
                                <el-option v-for="(value, key) in couponStateData" :key="key" :label="value" :value="key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="领取路径：" prop="fromPath">
                            <el-select v-model="listQuery.fromPath" clearable>
                                <el-option v-for="item in fromPathData" :key="item.key" :label="item.value" :value="item.key"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="优惠券：" prop="couponActivityId">
                            <el-select v-model="listQuery.couponActivityId" clearable filterable>
                                <el-option v-for="(item, key) in couponData" :key="key" :label="item.name" :value="item.couponActivityId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="领取时间：" prop="tempDateRange">
                            <el-date-picker
                                    v-model="listQuery.tempDateRange"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd hh:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="序号" type="index" fixed :index="(index)=>{return indexMethod(index, listQuery)}" width="80">
                </el-table-column>
                <el-table-column align="center" label="领取时间" prop="createdAt" width="100">
                    <template slot-scope="scope">
                        {{scope.row.createdAt}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="优惠券名称" prop="name"></el-table-column>
                <el-table-column align="center" label="用户昵称" prop="userName"></el-table-column>
                <el-table-column align="center" label="用户ID" prop="userId"></el-table-column>
                <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
                <el-table-column align="center" label="领取路径" prop="fromPath">
                    <template slot-scope="scope">
                        <span v-if="fromPathData.filter(item => item.key === scope.row.fromPath).length">
                            {{fromPathData.filter(item => item.key === scope.row.fromPath)[0].value}}
                        </span>
                        <span v-else> - </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="有效期" prop="createdAt" width="190">
                    <template slot-scope="scope">
                        {{scope.row.useStartTime}} ~ {{scope.row.useStopTime}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="使用状态" prop="couponState" width="80">
                    <template slot-scope="scope">
                        {{couponStateData[scope.row.couponState]}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="核销时间" prop="createdAt" width="100">
                    <template slot-scope="scope">
                        {{scope.row.usedAt || '-'}}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>
<script>
    export default {
      name: 'coupon',
      data(){
        return {
          couponStateData: {
            // 'COUPON_STATE_WAITING_FOR_USED': '待使用',
            'COUPON_STATE_NOT_USED': '未使用',
            'COUPON_STATE_USED': '已使用',
            'COUPON_STATE_EXPIRED': '已过期'
          },
          platformData: {
            'IOS': 'IOS',
            'Android': 'Android',
            'H5': 'H5'
          },
          couponData: [],
          fromPathData: [],

          listLoading: false,
          listQuery: {
            tempDateRange: [],

            userParam: '',
            couponState: '',
            fromPath: '',
            couponActivityId: '',
            receiveStartTime: '',
            receiveStopTime: '',
            pageIndex: 1,
            pageSize: 10
          },
          list: [],
          listTotal: 0
        }
      },
      created(){
        this.getList();
        this.getCouponList();
        this.getFromPathList();
      },
      methods: {
        // 获取列表
        getList () {
          this.listLoading = true;
          let date = this.listQuery.tempDateRange;
          this.listQuery.receiveStartTime = date && date.length ? date[0] : '';
          this.listQuery.receiveStopTime = date && date.length ? date[1] : '';

          this.request({
            url: '/coupon/system/activity/history',
            method: 'post',
            data: this.listQuery
          }).then(({data, totalCount}) => {
            this.list = data;
            this.listTotal = totalCount;
            this.listLoading = false;
          }).catch(err => {
            console.log(err);
            this.list = [];
            this.listTotal = 0;
            this.listLoading = false;
          });
        },
        // 获取优惠券列表
        getCouponList () {
          this.request({
            url: '/coupon/system/activity/query',
            method: 'post',
            data: {
              pageIndex: 1,
              pageSize: 100000
            }
          }).then(({data}) => {
            this.couponData = data;
          }).catch(err => {
            console.log(err);
            this.couponData = [];
          });
        },
        // 获取领取路径列表
        getFromPathList () {
          this.request({
            url: '/coupon/system/activity/get/frompath',
            method: 'get'
          }).then(({data}) => {
            this.fromPathData = data;
          }).catch(err => {
            console.log(err);
            this.fromPathData = [];
          });
        },
        // 清空搜索条件
        resetForm (formName) {
          this.$nextTick(() => {
            this.$refs[formName].resetFields()
          })
        },
        // 搜索
        search() {
          this.listQuery.pageIndex = 1;
          this.getList();
        },
        //切换每页条数
        handleSizeChange (value) {
          this.listQuery.pageSize = value;
          this.getList()
        },
        // 切换分页
        handleCurrentChange(page) {
          this.listQuery.pageIndex = page;
          this.getList();
        },

        // 操作优惠券
        operate(couponActivityId, type) {
          let warnMsg = type === 'disable' ? '作废后将会使已领取的券变为失效，可能遭到用户投诉，确认还要作废吗？' : `${this.operateTypeData[type]}该优惠券, 是否继续?`;
          this.$confirm(warnMsg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.request({
              url: `/coupon/system/activity/${type}`,
              method: 'post',
              data: { couponActivityId }
            }).then(({data}) => {
              this.$message.success(`优惠券活动已成功${this.operateTypeData[type]}`)
              this.getList()
            }).catch(err => {
              console.log(err);
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        },
      }
    }
</script>
